<template>
  <div>
    <div>
      <div style="width:100%;height:100%;" id="map"></div>
    </div>
<!--    <el-button type="success" round @click="handle">查询</el-button>-->
  </div>
</template>

<script>
  import img from '@/assets/定位.png'
  export default {
    name:"Map",
    data () {
      return {
      }
    },
    methods: {
      // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
      initMap: function () {
        // 定义地图中心点坐标
        var center = new window.TMap.LatLng(24.492359,118.178509)
        // zoom:11   //设置地图缩放级别
        // 定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new window.TMap.Map(document.getElementById('map'), {
          center: center, // 设置地图中心点坐标
          zoom: 17.2, // 设置地图缩放级别
          pitch: 50, // 设置俯仰角
          rotation: 45 // 设置地图旋转角度
        })
        console.log(map)
        console.log(window)
      },

    },
    mounted () {
      this.initMap()
    },
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      "myStyle": new TMap.MarkerStyle({
        "width": 25,  // 点标记样式宽度（像素）
        "height": 35, // 点标记样式高度（像素）
        "src": img,  //图片路径
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        "anchor": { x: 16, y: 32 }
      })
    },
    //点标记数据数组
    geometries: [{
      "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      "styleId": 'myStyle',  //指定样式id
      "position": new TMap.LatLng(24.492359,118.178509),  //点标记坐标位置
      "properties": {//自定义属性
        "title": "marker1"
      }
    }, {//第二个点标记
      "id": "2",
      "styleId": 'marker',
      "position": new TMap.LatLng(39.994104, 116.287503),
      "properties": {
        "title": "marker2"
      }
    }
    ]
  }
</script>
